{% extends "tools/base_tool.html" %}

{% block styles %}
<link rel="stylesheet" href="/static/css/timelapse-calculator.css">
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h3 class="card-title h5 mb-0">{{ get_text('timelapse_calculator', current_language) }}</h3>
            </div>
            <div class="card-body">
                <form id="timelapse-calculator">
                    <div class="mb-3">
                        <label for="real-duration" class="form-label">{{ get_text('real_duration', current_language) }}</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="real-duration-hours" placeholder="{{ get_text('hours', current_language) }}" min="0" value="2">
                            <span class="input-group-text">{{ get_text('hours', current_language) }}</span>
                            <input type="number" class="form-control" id="real-duration-minutes" placeholder="{{ get_text('minutes', current_language) }}" min="0" max="59" value="0">
                            <span class="input-group-text">{{ get_text('minutes', current_language) }}</span>
                        </div>
                        <small class="form-text text-muted">{{ get_text('real_duration_desc', current_language) }}</small>
                    </div>
                    <div class="mb-3">
                        <label for="video-duration" class="form-label">{{ get_text('video_duration', current_language) }}</label>
                        <input type="number" class="form-control" id="video-duration" placeholder="例如：10" min="1" value="10">
                        <small class="form-text text-muted">{{ get_text('video_duration_desc', current_language) }}</small>
                    </div>
                    <div class="mb-3">
                        <label for="fps" class="form-label">{{ get_text('fps', current_language) }}</label>
                        <select class="form-select" id="fps">
                            <option value="24">24 FPS (电影标准)</option>
                            <option value="25">25 FPS (PAL)</option>
                            <option value="30" selected>30 FPS (常用)</option>
                            <option value="60">60 FPS (高帧率)</option>
                        </select>
                        <small class="form-text text-muted">{{ get_text('fps_desc', current_language) }}</small>
                    </div>
                    <button type="button" class="btn btn-primary" id="calculate-timelapse">{{ get_text('calculate_params', current_language) }}</button>
                </form>
                <div class="mt-3 hidden" id="timelapse-result">
                    <div class="alert alert-info">
                        <h5 class="alert-heading">{{ get_text('calculation_result', current_language) }}</h5>
                        <p>{{ get_text('total_frames', current_language) }} <strong id="total-frames">-</strong> 张</p>
                        <p>{{ get_text('interval_seconds', current_language) }} <strong id="interval-seconds">-</strong> 秒/张</p>
                        <hr>
                        <p class="mb-0">{{ get_text('camera_settings', current_language) }} <span id="camera-settings">-</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h3 class="card-title h5 mb-0">{{ get_text('timelapse_tips', current_language) }}</h3>
            </div>
            <div class="card-body">
                <h5>{{ get_text('timelapse_tips', current_language) }}</h5>
                <ul>
                    <li><strong>{{ get_text('stability', current_language) }}</strong>: {{ get_text('stability_desc', current_language) }}</li>
                    <li><strong>{{ get_text('battery', current_language) }}</strong>: {{ get_text('battery_desc', current_language) }}</li>
                    <li><strong>{{ get_text('storage', current_language) }}</strong>: {{ get_text('storage_desc', current_language) }}</li>
                    <li><strong>{{ get_text('manual_settings', current_language) }}</strong>: {{ get_text('manual_settings_desc', current_language) }}</li>
                    <li><strong>{{ get_text('aperture_priority', current_language) }}</strong>: {{ get_text('aperture_priority_desc', current_language) }}</li>
                    <li><strong>{{ get_text('focus', current_language) }}</strong>: {{ get_text('focus_desc', current_language) }}</li>
                </ul>
                
                <h5 class="dark:text-white">{{ get_text('common_subjects', current_language) }}</h5>
                <table class="table table-sm dark:text-white dark">
                    <thead>
                        <tr>
                            <th class="dark:text-white">{{ get_text('subject', current_language) }}</th>
                            <th class="dark:text-white">{{ get_text('suggested_interval', current_language) }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ get_text('clouds', current_language) }}</td>
                            <td>2-5秒</td>
                        </tr>
                        <tr>
                            <td>{{ get_text('crowd', current_language) }}</td>
                            <td>1-2秒</td>
                        </tr>
                        <tr>
                            <td>{{ get_text('sunrise', current_language) }}</td>
                            <td>5-10秒</td>
                        </tr>
                        <tr>
                            <td>{{ get_text('stars', current_language) }}</td>
                            <td>20-30秒</td>
                        </tr>
                        <tr>
                            <td>{{ get_text('flowers', current_language) }}</td>
                            <td>3-5分钟</td>
                        </tr>
                        <tr>
                            <td>建筑施工</td>
                            <td>10-60分钟</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/timelapse-calculator.js"></script>
{% endblock %}